<template>
 <div>
   <el-form :inline="true" :model="queryForm" class="demo-form-inline">
     <el-form-item label="角色名称">
       <el-input v-model="queryForm.name" placeholder="角色名称"></el-input>
     </el-form-item>
     <el-form-item>
       <el-button type="primary" @click="list">查询</el-button>
     </el-form-item>
   </el-form>

   <el-table
       :data="tableData"
       style="width: 100%">
     <el-table-column
         prop="id"
         label="id"
         width="180">
     </el-table-column>
     <el-table-column
         prop="name"
         label="名称"
         width="180">
     </el-table-column>
     <el-table-column
         prop="auth"
         label="权限">
     </el-table-column>

     <el-table-column
         fixed="right"
         label="操作"
         width="100">
       <template slot-scope="scope">
         <el-button @click="openBind(scope.row.id)" type="text" size="small">绑定菜单</el-button>
         <el-button type="text" size="small">编辑</el-button>
       </template>
     </el-table-column>
   </el-table>
   <el-pagination
       @current-change="goPage"
       :page-size="size"
       layout="total, prev, pager, next"
       :total="total">
   </el-pagination>
   <el-dialog title="绑定菜单" :visible.sync="dialogFormVisible">
     <el-tree
         ref="tree"
         :data="data"
         show-checkbox
         node-key="id"
         :default-expand-all=true
         :default-expanded-keys="[2, 3]"
         :default-checked-keys="checkedkeys"
         :props="defaultProps">
     </el-tree>
     <div slot="footer" class="dialog-footer">
       <el-button @click="dialogFormVisible = false">取 消</el-button>
       <el-button type="primary" @click="bindMenu">确 定</el-button>
     </div>
   </el-dialog>
 </Div>
</template>

<script>
export default {
  name: "RoleView",
  data(){
    return{
      formLabelWidth:'120px',
      dialogFormVisible:false,
      tableData:[],
      queryForm:{},
      size:3,
      current:1,
      total:1,
      data:[],//树形结构的数据
      defaultProps:{
        label:'name'
      },
      rid:'',
      checkedkeys:[],//默认选中
    }
  },methods:{
    bindMenu(){//绑定菜单
     //获取选中的树形的菜单id
      let mids =this.$refs.tree.getCheckedKeys();
     this.axios.post("role/bindMenu",{rid:this.rid,mids:mids}).then(res=>{
       if(res.data.code==200){
         this.$message.success("绑定成功");
         this.list();
       }else{
         this.$message.success("绑定失败");
       }
     })

    },
    openBind(rid){//打开绑定 对话框
      this.checkedkeys=[],
      this.rid= rid;//要绑定的角色id
      this.getAllMenu();
      this.getMidsByRid(rid);//根据角色id获取该角色拥有的菜单id
      this.dialogFormVisible=true;
    },
    getMidsByRid(rid){
      this.axios.get("menu/getMidsByRid",{params:{rid:rid}}).then(res=>{
        this.checkedkeys =res.data.data;
      })

    },
    getAllMenu(){//获取所有的菜单
      this.axios.get("menu/list").then(res=>{
        this.data =res.data.data;
      })
    },
    goPage(page){
      this.current =page;
      this.list();
    },
    list(){
      this.axios.get("role/listPage",{params:{
        name:this.queryForm.name,current:this.current,size:this.size
        }}).then(res=>{
          this.tableData =res.data.data.records;
          this.total =res.data.data.total;
      })
    }
  },created() {
    this.list();
  }
}
</script>

<style scoped>

</style>